<!--
 * @Description: 
 * @Date: 2023-02-21 17:11:15
 * @LastEditors: czp
 * @LastEditTime: 2023-03-11 18:08:14
-->
<template>
	<div class="circle-friends">
		<div class="body">
			<div class="title">
				<div>
					<span>大家一起来分享</span>
					<el-button color="#8A1313">+ 分享图/视频 </el-button>
				</div>

				<div class="more">了解更多</div>
			</div>

			<swiper :modules="[Autoplay]" :slides-per-view="5" :space-between="4" :loop="true" :autoplay="true as any">
				<swiper-slide class="swiper-item" v-for="(item, index) in list2" :key="index">
					<el-image fit="cover" :src="item + '?imageMogr2/thumbnail/375x'" />
				</swiper-slide>
			</swiper>
		</div>
	</div>
</template>
<script setup lang="ts">
import { Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/autoplay";
import { useBaseStore } from "@/store/base";

const { cosPrefix } = useBaseStore();
const list2 = [
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/1.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/2.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/3.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/4.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/5.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/6.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/7.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/8.png",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/9.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/10.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/11.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/12.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/13.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/14.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/15.jpg",
	cosPrefix + "three-level/xiangmeng/ziwofenxiang/16.jpg"
];
</script>
<style lang="scss" scoped>
.circle-friends {
	position: relative;
	z-index: 9;
}
.body {
	display: flex;
	align-items: center;
	padding: 0 320px;
	background-color: #f7f7f7;
	.title {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 440px;
		padding: 20px;
		div {
			display: flex;
			justify-content: space-between;
		}
		span {
			font-family: SourceSerif;
			font-size: 28px;
			font-weight: bold;
			color: rgb(16 16 16 / 100%);
			&:last-child {
				margin-left: 20px;
				font-size: 20px;
				color: $theme-color;
			}
		}
	}
	.swiper {
		flex: 1;
		.swiper-item {
			position: relative;
			height: 152px;
			.el-image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.more {
		width: 100%;
		padding: 40px 0;
		font-size: 18px;
		color: #333333;
		text-align: center;
		text-decoration: underline;
	}
}
</style>
